
<template>
    <div class="info">
        <div class="button" v-if="!is_supplement">
            <el-tag></el-tag>
            <el-tag @click="return_basic_info">返回</el-tag>
        </div>
        <div class="page" v-if="is_more_page">
            <div class="currentPage">
                <span>当前&nbsp;&nbsp;第&nbsp;</span>
                <el-select v-model="page.currentPage" @change="handleCurrentChange">
                    <el-option
                        v-for="item in page_list"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
                <span>&nbsp;份&nbsp;/&nbsp;共{{page.total}}份</span>
            </div>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                layout="prev, pager, next"
                :total="page.total"
                prev-text="上一份答卷"
                next-text="下一份答卷">
            </el-pagination>
        </div>
        <div class="answer_title">
            <div class="title">
                <span style="color:#F59A23">【{{active_question_info.activityType}}】</span>
                <span>{{active_question_info.activityTitle}}</span>
            </div>
            <div class="submit_user">
                <span>
                    <span class="item">提交人：</span>
                    {{doctor_info.name}}&nbsp;{{doctor_info.hospital}}&nbsp;{{doctor_info.department}}
                </span>
            </div>
        </div>
        <div class="answer_info">
            <h4>答题信息</h4>
            <div class="content">
                <div>
                    <p>
                        <span class="item">答题序号：</span>
                        {{page.currentPage}}
                    </p>
                    <p>
                        <span class="item">开始时间：</span>
                        {{list.startTime}}
                    </p>
                    <!-- <p>浏览器：Chrome 77.0.3865.120</p> -->
                    <p>
                        <span class="item">用户IP：</span>
                        {{list.userIP}}
                    </p>
                </div>
                <div>
                    <p>
                        <span class="item">答题状态：</span>
                        {{list.rspdStatus}}
                    </p>
                    <p>
                        <span class="item">结束时间：</span>
                        {{list.finishTime}}
                    </p>
                    <!-- <p>操作系统：Android Linux 10</p> -->
                </div>
                <div>
                    <p>
                        <span class="item">来源：</span>
                        {{doctor_info.name}}
                    </p>
                    <p>
                        <span class="item">答题时长：</span>
                        {{list.timeUsedSecond}}
                    </p>
                </div>
            </div>
        </div>
        <div class="answer_detail">
            <h4>答题详情</h4>
            <div class="detail" v-for="item in question_detail" :key="item.serial_number">
                <div class="answer_content">
                    <p>Q{{item.serial_number}}：{{item.questionTitle}}[{{item.questionTypeDesc}}]</p>
                    <p>{{item.answer}}</p>
                </div>
                <el-divider></el-divider>
            </div>
        </div>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import bus from '../assets/js/eventBus';
    import {statusCode} from '../utils/index';
    export default {
        props:{
            is_supplement:{
                type:Boolean
            },
            active_question_info:{
                type:Object
            },
            doctor_info:{
                type:Object
            }
        },
        components:{

        },
        data() {
            return {
                page:{
                    currentPage:1,  //当前页
                    pageSize:1,   //每页显示条数
                    totalPage:0,  //总页数
                    total:0
                },
                is_more_page:false,   //是否超过1条数据
                list:{},   //问卷详情列表
                question_detail:[],   //问卷详情
                page_list:[]
            }
        },
        created(){
            
        },
        mounted(){
            this.get_questionnaire_detail();//获取问卷详情
        },
        methods: {
            //当前页
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.get_questionnaire_detail();
                this.page_list = [];
            },
            //返回查看基本信息
            return_basic_info(){
                //显示基本信息内容
                bus.$emit('isQuestionnaireDetail', false);
            },
            //获取问卷详情
            get_questionnaire_detail(){
                let that = this;
                let data = {
                    currentPage: this.page.currentPage,
                    doctorId: this.active_question_info.doctorId,
                    pageSize: this.page.pageSize,
                    questionnaireId: this.active_question_info.activityId
                };
                baseAjax(api.get_questionnaire_info, data, (res)=>{
                    if(res.code === statusCode.success){
                        let {count, currentPage, pageSize, totalPage, value} = res.data;
                        that.page.total = count;
                        that.page.currentPage = currentPage;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.list = value[0];
                        that.question_detail = value;
                        that.question_detail.forEach((item,index)=>{
                            item.serial_number = index+1
                        });
                        that.is_more_page = that.page.total == 1 ? false : true;
                        for(let i = 0;i<totalPage;i++){
                            that.page_list.push(i+1);
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
.info{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    overflow:auto;
    max-height: 646px;
    min-height: 646px;
    .item{
        color:#909090;
    }
    .button{
        display:flex;
        justify-content:space-between;
        margin-bottom:14px;
        .el-tag{
            border-color:transparent;
            background-color:transparent;
            font-size:16px;
            color:#2B3A4F;
            padding:0;
        }
        .el-tag:last-child{
            cursor: pointer;
        }
    }
    .page{
        display:flex;
        justify-content:space-between;
        margin-bottom:24px;
        .currentPage{
            /deep/.el-select{
                width:28%;
                .el-input{
                   .el-input__inner{
                       height:32px;
                   }
                   .el-input__suffix{
                      .el-input__suffix-inner{
                          .el-input__icon{
                              line-height:32px;
                          }
                      } 
                   }
                }
            }
        }
        /deep/.el-pagination{
            position:static;
            right:0;
            padding:0;
            .el-pager{
                display:none;
            }
            .btn-prev{
                padding-right:17px;
                position:relative;
            }
            .btn-prev::after{
                display:block;
                content:"";
                width:1px;
                height:13px;
                background-color:#303133;
                position:absolute;
                top:7px;
                right:6.9px;
                transform:rotate(14deg);
            }
            .btn-next{
                padding:0;
            }
        }
    }
    .answer_title{
        margin-bottom:28px;
        .title{
            font-size:15px;
            font-weight:bold;
            margin-bottom:12px;
        }
        .submit_user{
            margin-left:8px;
        }
    }
    .answer_info{
        h4{
            font-size:14px;
            margin-bottom:4px;
            position:relative;
            padding-left:8px;
        }
        h4::before{
            display:block;
            content:"";
            width:2.5px;
            height:14px;
            background-color:#5555f5;
            position:absolute;
            top:1px;
            left:0;
        }
        .content{
            display:flex;
            padding-left:8px;
            div:first-child,div:nth-child(2){
                margin-right:15px;
            }
        }
    }
    .answer_detail{
        h4{
            font-size:14px;
            margin-bottom:4px;
            position:relative;
            padding-left:8px;
        }
        h4::before{
            display:block;
            content:"";
            width:2.5px;
            height:14px;
            background-color:#5555f5;
            position:absolute;
            top:1px;
            left:0;
        }
        .detail{
            .answer_content{
                padding-left:8px;
                p:first-child{
                    margin-bottom:21px;
                }
            }
        }
    }
}
.info::-webkit-scrollbar {
    display: none;
}

</style>
